<!--分享他人查询-->
<template>
	<view style="text-align: center">
		<uni-popup ref="popup" :maskClick="false" background-color="#fff" style="position: relative;">
			<view class="popup-content">
				<view class="rightClass" v-if="canvasStatus">
					<canvas type="2d"
						:style="{ 'width': clientWidthCanvas + 'px', 'height': clientHeightCanvas + 'px' }"
						canvas-id="canvasOne"></canvas>
					<canvas type="2d" canvas-id="qrcode"
						:style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }"
						style="position: absolute;top: -1000px;z-index: -9"></canvas>
				</view>
				<!-- #ifdef H5 -->
				<view class="row  textStyle" :style="{ bottom: clientHeightCanvas / 35 + 'px', }">
					长按保存图片
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="row  textStyle" :style="{ bottom: clientHeightCanvas / 35 + 'px', }" @click="saveImage()">
					点击保存到手机
				</view>
				<!-- #endif -->
				<image class="rightClass" :src="poster"></image>
				<view @click="closePop" class="closeStyle">
					<image src="/static/image/anotherClose.png"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { loadAnotherBase64 } from '../base64'
import store from "@/store";
// #ifdef H5 || APP-PLUS 
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
// #endif
export default {
	props: {
		show: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			usersInfoObj: {},
			base64List: [],
			PromotionCode: '',
			qrcodeSize: 100,
			poster: '',
			canvasStatus: true, //海报绘图标签
			spreadList: [],
			clientWidthCanvas: '',
			clientHeightCanvas: '',
			imageStr: '',
			type: 'default'
		}
	},
	async created() {

	},
	methods: {
		async open({imgbgBase64, type}) {
			this.base64List = [`${imgbgBase64}`]
			if (type == 'activity') {
				this.type = type
			}

			uni.getSystemInfo({
				success: (res) => {
					this.clientWidthCanvas = this.setpx(520)
					this.clientHeightCanvas = this.setpx(900)
				}
			})
			await this.getInfo()
			// #ifdef H5
			await this.make()
			// #endif
			// #ifdef MP-WEIXIN
			await this.PosterCanvas(this.base64List[0], loadAnotherBase64, this.usersInfoObj
				.nickname, 0);
			// #endif
			this.$refs.popup.open('center')
		},
		setpx(rpx) {
			const screenWidth = uni.getSystemInfoSync().screenWidth
			return (screenWidth * Number.parseInt(rpx)) / 750
		},
		closePop() {
			uni.hideLoading();
			this.canvasStatus = false
			this.$emit('close', false)
			this.$refs.popup.close()
			
		},
		async getInfo() {
			await store.dispatch('USERINFO').then(res => {
				this.usersInfoObj = res
			}).catch(err => {
				if (err.code == 401) {
					uni.navigateTo({
						url: '/pagesWater/users/login'
					})
				}
			})
		},
		// 生成二维码；
		make() {
			let that = this;
			const strMap = {
				"H5-dev": "https://dev-manage.julimeng.com/2h5/#/",
				"H5-test": "https://test-manage.julimeng.com/2h5/#/",
				"H5-uat": "https://dev-manage.julimeng.com/2h5/#/",
				"H5-prod": "https://manage.shengdaiqifu.com/2h5/#/",
			};
			// #ifdef APP-PLUS
			let href = 'https://manage.shengdaiqifu.com/2h5/#/'
			// #endif
			// #ifdef H5
			let href = strMap[process.env.ENV_TYPE]
			// #endif
			// #ifdef MP-WEIXIN
			let href = ''
			// #endif
			uni.showLoading({
				title: '生成海报中...'
			})

			const typeMap = {
				"default": `${href}pagesWater/taxSearch/index?spreadUid=${that.usersInfoObj.id}&channelCode=fenxiangtarenchaxun`,
				"activity": `${href}pagesWater/taxSearch/index?activityUserId=${that.usersInfoObj.id}`,
			};

			uQRCode.make({
				canvasId: 'qrcode',
				text: typeMap[that.type],
				size: this.qrcodeSize,
				margin: 5,
				success: res => {
					that.PromotionCode = res;
					setTimeout(() => {
						that.PosterCanvas(this.base64List[0], that.PromotionCode, that.usersInfoObj
							.nickname, 0);
					}, 300);
				},
				complete: (res) => {
					
				 },
				fail: res => {
					uni.hideLoading();
					that.$util.Tips({
						title: '海报二维码生成失败！'
					});
				}
			})
		},


		PosterCanvas: function (arrImages, code, nickname, index) {
			let popWidth = '',
				popHeight = ''
			uni.createSelectorQuery()
				.in(this)
				.select('.popup-content')
				.boundingClientRect(data => {
					popWidth = this.setpx(data.width)
					popHeight = this.setpx(data.height)
				})
				.exec();

			let context = uni.createCanvasContext('canvasOne')
			context.clearRect(0, 0, 0, 0);
			let hW = this.setpx(500);
			// let hH = uni.upx2px(280);
			let that = this;
			context.drawImage(arrImages, 0, 0, that.clientWidthCanvas, that.clientHeightCanvas);
			context.save();
			context.drawImage(
				code,
				that.clientWidthCanvas / 4.0,
				that.clientHeightCanvas / 1.84,
				that.clientWidthCanvas / 2.02,
				that.clientHeightCanvas / 3.5,
			);
			context.restore();
			context.setFontSize(28);
			setTimeout(() => {
				context.draw(true, (v) => {
					uni.canvasToTempFilePath({
						destWidth: 750,
						destHeight: 1190,
						canvasId: 'canvasOne',
						fileType: 'jpg',
						success: function (res) {
							// 在H5平台下，tempFilePath 为 base64
							uni.hideLoading();
							// that.spreadList[index].pic = res.tempFilePath;
							that.$set(that, 'poster', res.tempFilePath);
							that.$set(that, 'canvasStatus', false);
						}
					})
				})
			}, 500);
		},
		saveImage() {
			this.$util.saveAppImage(this.poster)
		},
		// 点击保存海报
		bindchange(e) {
			const canvasDataUrl = this.poster
			// 创建一个a标签
			const a = document.createElement('a');
			a.href = canvasDataUrl;
			a.download = 'canvas-image.png'; // 可以自定义文件名和格式
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);

		},
		shareLink() {
			uni.setClipboardData({
				data: location.origin + location.pathname + `#/?spreadUid=${this.usersInfoObj.id}`,
				showToast: true,
				success: function () {
					
				}
			})
		},
		getImageInfo() {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: imgSrc,
					success: (image) => {
						resolve(image);
					},
					fail: (err) => {
						reject(err);
					}
				});
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.closeStyle {
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	bottom: -80rpx;
	z-index: 9;

	image {
		width: 100%;
		height: 100%;
	}
}

.imageSave {
	position: absolute;
	bottom: 270rpx;
	z-index: 99;
	width: 256rpx;
	height: 48rpx;
	color: #FFFFFF;
	background-color: #EFBA48;
	border-radius: 40rpx;
	line-height: 48rpx;
}

.rightClass {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
	//position: fixed;
	//top: 0;
	//left: 0;
}

.textStyle {
	position: fixed;
	z-index: 9;
	text-align: center;
	color: #FFFFFF;
	width: 340rpx;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40rpx;
}

.popup-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	//padding: 15px;
	height: 900upx;
	background-color: #fff;
	text-align: center;
	width: 520upx;
	margin: 0 auto;
	position: relative;
	z-index: 999;
	border-radius: 20rpx;
}

/deep/ .uni-popup__wrapper {
	border-radius: 20rpx;
}

.textStyle {
	width: 430rpx;
	height: 68rpx;
	background: #2877ff;
	border-radius: 44rpx;
	position: absolute;
	z-index: 9;
	text-align: center !important;
	color: #ffffff;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 34rpx;
	color: #ffffff;
	// width: 340rpx;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40rpx;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: nowrap;
}
</style>